<template>
	<view class="order">
		<u-subsection
			:list="list"
			:current="current"
			:animation="true"
			bgColor="#1B1B1B"
			active-color="#7D0C0C"
			@change="sectionChange"
			font-size="30"
			height="93"
			inactive-color="#ffffff"
		></u-subsection>

		<view>
			<block v-if="all.length != 0">
				<view class="ordrNum" v-for="(item, index) in all" :key="index" @click="jumpDetails(item)">
					<view class="top">
						<text class="text">订单号：{{ item.number }}</text>
						<text class="text1">{{ item.status }}</text>
					</view>
					<view class="henxian"></view>
					<view class="theFollowing">
						<view class="info"><image :src="item.picture" mode="aspectFill"></image></view>
						<view class="info1">
							<view class="list">{{ item.name }}</view>
							<view class="list1">
								<text v-if="item.plate">{{ item.plate | hide }}</text>
								<text>{{ item.name }}</text>
							</view>
							<view class="list2">{{ item.stare_time }} {{ item.day == '共0天' ? '共1天' : item.day }}</view>
							<view class="list3">
								<text class="text">{{ item.status }}</text>
								<text class="text1">￥ {{ item.deposit }}</text>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status"  />
			</block>
			<!-- <u-back-top :scroll-top="scrollTop" z-index="999999"></u-back-top> -->
			
			
			
			<u-empty text="订单为空" mode="order" v-else></u-empty>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '全部',
				},
				{
					name: '租用中',
				},
				{
					name: '已结束',
				},
			],
			scrollTop: 0,
			uid: '',
			page: 1,
			limit: 10,
			current: 0,
			all: [],
			status: 'loadmore',
		};
	},
	onShow() {
		this.uid = getApp().globalData.uid;
		this.current = 0;
		this.all = [];
		this.page = 1
		this.limit = 10
		
		this.getOrdrLst();
	},
	onLoad() {
		if (!uni.getStorageSync('uid')) {
			uni.navigateTo({
				url: '../logIn/logIn',
			});
		}
		//this.getOrdrLst();
		this.uid = uni.getStorageSync('uid');
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		sectionChange(index) {
			this.all = [];
			this.page = 1;
			console.log('this.current :>> ', this.current);
			this.current = index;
			index == 0 && this.getOrdrLst();
			index == 1 && this.getOrdrLst(1);
			index == 2 && this.getOrdrLst(9);
		},
		// 跳转详情
		jumpDetails(item) {
			if (item.is_status !== 2 && item.is_status !== 9) {
				uni.navigateTo({
					url: './submitOrdr/submitOrdr?oid=' + item.id,
				});
			} else {
				uni.$showMsg('订单已结束');
			}
		},
		//获取订单列表

		async getOrdrLst(i) {
			//全部 -1 租用中 1 已结束 9
			if (!i) {
				var status = -1;
			} else {
				var status = i;
			}

			const res = await this.$u.post('api/car/car_order', {
				uid: uni.getStorageSync('uid'),
				page: this.page,
				limit: this.limit,
				status,
			});

			this.page += 1;
			if (res.data.length == 0) {
				this.status = 'loadmore';
			}

			this.all = [...this.all, ...res.data];
			this.$forceUpdate()
		},
	},
	onReachBottom(e) {
		if (this.status == 'loadmore') return;
		this.status = 'loading';
		var list = [-1, 1, 9];
		this.getOrdrLst(list[this.current]);
	},
};
</script>

<style lang="scss" scoped>
.order {
	width: 100vw;
	height: 100%;
	/deep/.u-empty {
		margin-top: 30vh !important;
	}
	background-color: #1b1b1b;
	/deep/ .u-subsection {
		width: 640rpx;
		margin: 0 auto;
	}
	/deep/.u-item-bg {
		width: 100%;
		height: 6rpx !important;
		background: #7d0c0c !important;
		border-radius: 3rpx !important;
	}
	/deep/.u-item {
		width: 107rpx !important;
	}
	.ordrNum {
		width: 710rpx;
		height: 331rpx;
		background: #2a2929;
		border-radius: 15rpx;
		margin: 0 auto;
		margin-top: 37rpx;
		padding: 28rpx 32rpx;
		.top {
			display: flex;
			justify-content: space-between;
			.text {
				height: 23rpx;
				line-height: 23rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #737373;
			}
			.text1 {
				height: 23rpx;
				line-height: 23rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #d60000;
			}
		}
		.henxian {
			width: 654rpx;

			border: 1rpx solid #737373;
			margin-top: 31rpx;
		}
		.theFollowing {
			padding-top: 28rpx;
			display: flex;
			.info {
				width: 184rpx;
				height: 192rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.info1 {
				margin-left: 33rpx;
			}
			.list {
				height: 38rpx;
				line-height: 38rpx;
				font-size: 38rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #fdfdfd;
			}
			.list1 {
				margin-top: 19rpx;
				text {
					display: inline-block;
					padding: 4rpx 17rpx;
					//line-height: 31rpx;
					text-align: center;
					background: #dcdcdc;
					border-radius: 16rpx;
					margin-right: 10rpx;

					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #1e2024;
				}
			}
			.list2 {
				margin-top: 20rpx;

				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
			}
			.list3 {
				margin-top: 10rpx;
				.text {
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
				}
				.text1 {
					margin-left: 30rpx;
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #d60000;
				}
			}
		}
	}
}
</style>
